<template>
  <div>
    <div class="login-head">
      <span style="color: #fff" @click="jumpFn()">
        <van-icon name="arrow-left"
      /></span>
      <span class="login-title">账户信息</span>
      <span></span>
    </div>
    <div class="info-content">
      <div class="first-list">
        <van-uploader :after-read="afterRead"> 
          <p>头像</p>
        </van-uploader>
        <van-uploader :after-read="afterRead"> 
          <div class="first-list-left">
            <img :src="imgObj" alt="" />
            <span style="vertical-align: middle"
              ><van-icon name="arrow"
            /></span>
          </div>
        </van-uploader>
      </div>
                                       
      <div class="second-list" @click="jumpUserV()">
        <p>用户名</p>
        <p>{{ idVal }}</p>
      </div>

      <div class="third-list" @click="jumpModefyAdress()">
        <p>收货地址</p>
        <p><van-icon name="arrow" /></p>
      </div>
    </div>
    <p class="adress-p">收货地址</p>
    <div class="four-list">
      <div class="four-list-left">
        <p>
          <van-icon
            style="line-height: 1.4249rem; font-size: 20px"
            name="phone-circle"
          />
        </p>
        <p id="tip" @click="alertV()">手机</p>
      </div>
      <p><van-icon name="arrow" /></p>
    </div>
    <p class="adress-p">安全设置</p>
    <div class="four-list">
      <div class="four-list-left" @click="jumpModifyPass()">
        <p>登录密码</p>
      </div>
      <p style="vertical-align: middle">
        修改
        <van-icon
          name="arrow"
          style="
            line-height: 1.4249rem;
            color: #999;
            position: relative;
            top: 3px;
          "
        />
      </p>
    </div>
    <div class="close-btn">
      <van-button type="danger" class="btn-close">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "info",

  data() {
    return {
      imgObj:JSON.parse(localStorage.getItem('ursl')),
    };
  },
  mounted() {},
  methods: {
    

    afterRead(file) {
      localStorage.setItem("ursl",JSON.stringify(file.content));
      this.imgObj =JSON.parse(localStorage.getItem('ursl'))
      console.log(this.imgObj)
      // this.upload();
    },
    jumpFn() {
      this.$store.commit("arrorV", this.imgObj);
      this.$router.back();
    },
    jumpUserV() {
      this.$store.commit("UserVT");
      this.$router.push({
        name: "userV",
      });
    },
    jumpModifyPass(){
      this.$router.push({
        name:"modifyPass"
      })
    },
  jumpModefyAdress(){
    this.$router.push({
      name:"modifyAdress"
    })
  },
    alertV(){
       new TipBox({type:'tip',str:'请在手机APP中设置',clickDomCancel:true,setTime:10000500,hasBtn:true});  
    }
  },
  computed: {
    ...mapState(["idVal","arror"]),
  },
};
</script>

<style scoped>
.login-head {
  width: 100%;
  height: 1.2576rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
  position: fixed;
  top: 0;
  left: 0;
}
.login-title {
  color: white;
  position: relative;
  left: -0.5405rem;
  font-size: 0.5405rem;
}
.first-list {
  width: 100%;
  height: 2.1676rem;
  background-color: #fff;
  display: flex;
  margin-top: 1.6216rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.4595rem;
  color: #333;
  box-sizing: border-box;
  padding: 0 0.2703rem;
  border-bottom: 0.027rem solid #f5f5f5;
}
.first-list-left img {
  width: 1.5836rem;
  height: 1.5836rem;
  border-radius: 50%;
}
.second-list,
.third-list,
.four-list {
  width: 100%;
  height: 1.4249rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.4595rem;
  color: #333;
  box-sizing: border-box;
  padding: 0 0.3514rem 0 10px;
  border-bottom: 0.027rem solid #f5f5f5;
}
.four-list-left {
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}
.adress-p {
  line-height: 1rem;
  width: 2.7027rem;
  font-size: 0.3784rem;
  box-sizing: border-box;
  padding-left: 0.2703rem;
  color: #666;
}
.close-btn {
  text-align: center;
  margin-top: 1.3514rem;
}
.btn-close {
  width: 95%;
}
</style>